﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <div class="l-auto-window only-tabs">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('api_type_f_Name')" :span="24" >
                                    <el-form-item 
                                        :label="$t('名称')" 
                                        prop="api_type_f_Name"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('api_type_f_Name')" v-model="formData.api_type_f_Name" :placeholder="$t('please enter')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_type_f_Code')" :span="24" >
                                    <el-form-item 
                                        :label="$t('编码')" 
                                        prop="api_type_f_Code"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('api_type_f_Code')" v-model="formData.api_type_f_Code" :placeholder="$t('please enter')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_type_f_PId')" :span="24" >
                                    <el-form-item label="上级" prop="api_type_f_PId" v-if="lr_hasPageAuth('api_type_f_PId')">
                                        <l-tree-select
                                            v-model="formData.api_type_f_PId"
                                            :options="typeTree"
                                            >
                                        </l-tree-select>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_type_f_SortCode')" :span="24" >
                                    <el-form-item 
                                        :label="$t('排序')" 
                                        prop="api_type_f_SortCode"
                                        > 
                                        <el-input-number  :disabled="!lr_formEditAuth('api_type_f_SortCode')" controlsPosition="default" v-model="formData.api_type_f_SortCode" :placeholder="$t('please enter')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_type_f_Description')" :span="24" >
                                    <el-form-item 
                                        :label="$t('备注')" 
                                        prop="api_type_f_Description"
                                        > 
                                        <el-input type="textarea"  :disabled="!lr_formEditAuth('api_type_f_Description')" :rows="6" v-model="formData.api_type_f_Description" :placeholder="$t('please enter')" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.apimanage.apitype

export default {
    data(){
        return {
            moduleCode: 'apiManage_apitype',
            activeName: 'tab0',
            formData: {
                api_type_f_Id:"",//主键
                api_type_f_Name:"", // 名称
                api_type_f_Code:"", // 编码
                api_type_f_PId:"0", // 上级
                api_type_f_SortCode:"99", // 排序
                api_type_f_Description:"", // 备注

            },
            rules: {
                api_type_f_Name:[
                    { required: true, message: 'please enter名称' },
                ],
                api_type_f_Code:[
                    { required: true, message: 'please enter编码' },
                    { validator: this.lr_existDbFiled,
                        fieldName:'f_Code',
                        keyValue:() => { 
                        return this.formData.api_type_f_Id },
                        tableName:'api_type',
                        keyName:'f_Id',
                        trigger: 'null'}
                ],
                api_type_f_SortCode:[
                    { required: true, message: 'please enter排序' },
                ],

            },

            //子父级下拉选择
            options:[]
            
        };
    },
    created () {
    },
    mounted() {
            this.getTypeList()
    },
    computed: {
        typeTree(){
            return this.$toTree(this.options || [],"f_Id","f_PId","f_Id","f_Name",[this.formData.api_type_f_Id])
        }
    },
    methods: {
        async getTypeList(){
            let queryData = {}
            queryData.f_PId="0";
            this.options=await this.$awaitWraper(api.getList(queryData))
        },

        // Reset表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            
            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data,'api_type')

        },
        // 获取表单数据
        getForm() {
            return this.$getFormData(this.formData,'api_type')

        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// Edit
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// Add
                postData.f_Id = keyValue

                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>